<template>
   <el-dialog :lock-scroll="true"
      v-model="visible"
      width="800px" 
      title="添加节点"
      top="5vh"
      :close-on-click-modal="false">
    <div class="lecturer-add-div">
      <div>{{props.data.formId}}</div>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input size="small" v-model="formData.name"></el-input>
        </el-form-item>
         <el-form-item label="节点类型" prop="nodeType">
          <el-radio-group v-model="formData.nodeType">
            <el-radio label="1" size="large" border>导航节点</el-radio>
            <el-radio label="2" size="large" border>入口接口</el-radio>
          </el-radio-group>
         </el-form-item>
      </el-form>
    </div>
    <template #footer>
        <div class="dialog-footer">
            <el-button size="mini" type="primary" @click="handleSubmit">保存</el-button>
            <el-button size="mini" @click="handleReturn(false)">关闭</el-button>
        </div>
      </template>
  </el-dialog>
</template>

<script setup lang="ts">
   /***基础组件引入***/
    import { reactive, ref, watch, toRefs, onMounted } from 'vue'
     import { ElForm, ElMessage } from 'element-plus';
     /*****请求组件引入****/
    import { addAppMenuNode} from '@/api/appMenu';

     /****关联组件*****/
    const formRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

    const state = reactive({
      formData: {},
      visible: false,
      rules: {
        name: [
          {
            required: true,
            message: '请输入应用名称',
            trigger: 'blur',
          },
        ],
      },
    });
    const {
      formData,
      rules,
      visible
    } = toRefs(state);

    
    const handleSubmit = () => {
       formRef.value.validate((valid: boolean) => {
        if (valid) {
          
          addAppMenuNode(state.formData.appId,state.formData).then(response =>{
             ElMessage.success('添加成功');
             handleReturn(true);
          });
        } else {
          return false;
        }
      }); 
    }
    

    /**子组件调用父的方法**/
    const emits = defineEmits(['callback']);
    const handleReturn = (refresh:boolean) => {
        emits('callback',{refresh: refresh})
    };

     /**监控父组件传值并赋值***/
    const parentData = defineProps({
        props: {
          visible: Boolean,
          data: Object
        }
    });

    watch(() => parentData.props,
       // 回调函数 callback
       (newValue, oldValue) => {
         console.log(newValue)
          state.visible = newValue.visible;

          state.formData = {
             appId: newValue.data.appId,
             parentId: newValue.data.parentId
          };

          console.log(state);
          
          
       }, {immediate:true, deep: true}
    );
    
   
</script>

<style lang="scss" scoped>
</style>